<template>
  <el-popover
    ref="popoverRef"
    :visible="visible"
    trigger="manual"
    placement="right"
    popper-class="drawing-item-operation-popover"
    :show-arrow="false"
    :virtual-ref="virtualRef"
    virtual-triggering
    :width="30"
    @hide="handleHide"
  >
    <template #default>
      <div class="drawing-item-operation-wrap">
        <span
          class="drawing-item-copy"
          :title="$t('formI18n.all.copy')"
          @click="handleCopy"
        >
          <el-icon
            color="#484848"
            size="18"
          >
            <TablerCopy />
          </el-icon>
        </span>
        <span
          class="drawing-item-plus"
          :title="$t('form.examConfig.addQuestions')"
          @click="handleAddToBank"
        >
          <el-icon
            color="#484848"
            size="20"
          >
            <TablerTagsFilled />
          </el-icon>
        </span>
        <span
          class="drawing-item-delete"
          :title="$t('formI18n.all.delete')"
          @click="handleDelete"
        >
          <el-icon
            color="#484848"
            size="18"
          >
            <TablerTrash />
          </el-icon>
        </span>
      </div>
    </template>
  </el-popover>
</template>

<script lang="ts" setup>
import TablerCopy from "~icons/tabler/copy";
import TablerTrash from "~icons/tabler/trash";
import TablerTagsFilled from "~icons/tabler/tags";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  virtualRef: {
    type: Object,
    required: true
  },
  currentItem: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(["update:visible", "copy", "delete", "add-bank"]);

const handleHide = () => {
  emit("update:visible", false);
};

const handleCopy = () => {
  emit("copy", props.currentItem);
  handleHide();
};

const handleDelete = () => {
  emit("delete", props.currentItem);
  handleHide();
};

const handleAddToBank = () => {
  emit("add-bank", props.currentItem);
  handleHide();
};
</script>

<style lang="scss" scoped>
.drawing-item-operation-wrap {
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 99999;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 38px;
  gap: 5px;

  .el-icon {
    color: #606266;
    font-size: 16px;
    margin: 4px 2px;
  }

  & .drawing-item-copy {
    &:hover {
      .el-icon {
        color: var(--el-color-primary);
      }
    }
  }

  & .drawing-item-plus {
    &:hover {
      .el-icon {
        color: var(--el-color-success);
      }
    }
  }

  & .drawing-item-delete {
    &:hover {
      .el-icon {
        color: var(--el-color-danger);
      }
    }
  }
}
</style>
<style lang="scss">
.drawing-item-operation-popover {
  z-index: 999 !important;
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;

  .el-popover__reference {
    padding: 0 !important;
  }
}
</style>
